<template>
  <div class="userCenter">
    <!--盒子-->
    <div class="box">
      <!--左侧盒子-->
      <div class="left">
        <!--头-->
        <div class="top-header">
          <!--头像-->
          <div class="avatar">
            <Avatar icon="ios-person" size="80"
                    src="http://wyxjava.oss-cn-shanghai.aliyuncs.com/1258004746996944896.jpg"/>
          </div>
          <!--名称-->
          <div class="name">
            {{userInfo.userName}}
          </div>
        </div>
        <!--分类-->
        <div class="tab">
          <!--消息设置-->
          <div class="newBox">
            <div class="title">消息设置</div>
            <div :class="{'m':true,'now':choiceId=='myNew'}" @click="now('myNew')">我的消息</div>
            <div :class="{'m':true,'now':choiceId=='sysNew'}" @click="now('sysNew')">系统通知</div>
          </div>
          <!--个人中心-->
          <div class="my">
            <div class="title">基本设置</div>
            <div :class="{'m':true,'now':choiceId=='myInfo'}" @click="now('myInfo')">个人资料</div>
            <div :class="{'m':true,'now':choiceId=='resetPwd'}" @click="now('resetPwd')">修改密码</div>
            <div :class="{'m':true,'now':choiceId=='email'}" @click="now('email')">邮箱绑定</div>
            <div :class="{'m':true,'now':choiceId=='thirdAccount'}" @click="now('thirdAccount')">第三方账号</div>
          </div>
        </div>
      </div>
      <!--右侧盒子-->
      <div class="right">

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        choiceId: ""
      }
    },
    computed: {
      userInfo() {
        return this.Store.getters.getUserInfo;
      }
    },
    methods: {
      now: function (tab) {
        switch (tab) {
          case 'myNew':
            this.choiceId = "myNew"
            break;
          case 'sysNew':
            this.choiceId = "sysNew"
            break;
          case 'myInfo':
            this.choiceId = "myInfo"
            break;
          case 'resetPwd':
            this.choiceId = "resetPwd"
            break;
          case 'email':
            this.choiceId = "email"
            break;
          case 'thirdAccount':
            this.choiceId = "thirdAccount"
            break;
        }
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>
  .userCenter {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  /*盒子*/
  .userCenter .box {
    overflow: hidden;
  }

  /*左侧盒子*/
  .userCenter .box .left {
    float: left;
    width: 240px;
    padding: 20px 5px 0px 5px;
    min-height: calc(100vh - 70px);
  }

  /*头像*/
  .userCenter .box .left .top-header {
    background-color: #DDDDDD;
    width: 100%;
    height: 100px;
    overflow: hidden;
    box-shadow: 0px 1px 4px -1px #666666;
  }

  .userCenter .box .left .top-header .avatar {
    float: left;
    width: 80px;
    height: 80px;
    margin: 10px 0px 0px 10px;
  }

  .userCenter .box .left .top-header .name {
    float: left;
    width: 130px;
    font-size: 18px;
    line-height: 20px;
    height: 40px;
    margin: 20px 0px 0px 10px;
  }

  .userCenter .box .left .tab {
    width: 100%;
    min-height: calc(100vh - 190px);
    box-shadow: 0px 1px 5px -1px #333333;
  }

  .userCenter .box .left .newBox {
    width: 100%;
    min-height: 120px;
    border-bottom: 1px solid #999999;
    border-radius: 4px;
  }

  /*标题*/
  .userCenter .box .left .title {
    font-size: 18px;
    padding: 10px 0px 0px 10px;
  }

  .userCenter .box .left .m {
    padding: 10px 0px 4px 20px;
    color: #888888;
    font-size: 14px;
  }

  .userCenter .box .left .now {
    color: #F20A0A !important;
  }

  .userCenter .box .left .m:hover {
    color: #F20A0A;
  }

  /*************************************/
  /*右侧盒子*/
  .userCenter .box .right {
    float: left;
    width: 940px;
    margin: 20px 5px 0px 10px;
    min-height: calc(100vh - 90px);
    box-shadow: 0px 1px 5px -1px #333333;
  }
</style>
